<template>
  <div class="ads-review-container">
    <div class="search-bar">
      <el-input
        v-model="searchParams.title"
        placeholder="广告名称"
        clearable
        style="width: 200px"
        @keyup.enter="handleSearch"
      />
       <el-select
    v-model="searchParams.status"
    placeholder="审核状态"
    clearable
    style="width: 150px; margin-left: 10px"
  >
    <el-option label="待审核" :value="0" />
    <el-option label="已审核" :value="1" />
    <el-option label="投放中" :value="2" />
    <el-option label="已完成" :value="3" />
    <el-option label="已拒绝" :value="4" />
  </el-select>
      <el-button 
        type="primary" 
        style="margin-left: 10px"
        @click="handleSearch"
      >
        搜索
      </el-button>
    </div>

    <el-table :data="adsList" border stripe v-loading="loading">
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="title" label="广告名称" width="180" />
      <el-table-column prop="content" label="广告内容" min-width="200">
        <template #default="{ row }">
          {{ row.content || '--' }}
        </template>
      </el-table-column>
      <el-table-column prop="budget" label="预算" width="120">
        <template #default="{ row }">
          ¥{{ row.budget }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="120">
    <template #default="{ row }">
      <el-tag :type="statusTagType(row.status)">
        {{ statusMap[row.status] }}
      </el-tag>
    </template>
  </el-table-column>
      <el-table-column label="投放时间" width="300">
        <template #default="{ row }">
          {{ formatTime(row.startTime) }} - {{ formatTime(row.endTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="createdTime" label="创建时间" width="180">
        <template #default="{ row }">
          {{ formatTime(row.createdTime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" fixed="right">
    <template #default="{ row }">
      <el-button 
        size="small" 
        type="success" 
        @click="handleReview(row, 1)"
        :disabled="row.status !== 0"
      >
        审核通过
      </el-button>
      <el-button 
        size="small" 
        type="danger" 
        @click="handleReview(row, 4)"
        :disabled="row.status !== 0"
      >
        拒绝
      </el-button>
    </template>
  </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        v-model:current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        layout="total, prev, pager, next, jumper"
        @current-change="handlePageChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getAdsList, approveAds, rejectAds } from '@/api/adsControl'

// 响应式数据
const adsList = ref([])
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 搜索参数
const searchParams = ref({
  title: '',
  status: null,
  pageNum: 1,
  pageSize: 10
})

// 状态映射
const statusMap = {
  0: '待审核',
  1: '已审核',
  2: '投放中',
  3: '已完成',
  4: '已拒绝'
}

// 状态标签类型
const statusTagType = (status) => {
  const types = {
    0: 'info',      // 待审核 - 灰色
    1: 'success',   // 已审核 - 绿色
    2: 'warning',   // 投放中 - 黄色
    3: 'primary',   // 已完成 - 蓝色
    4: 'danger'     // 已拒绝 - 红色
  }
  return types[status] || 'info'
}

// 加载广告列表
const loadAdsList = async () => {
  try {
    loading.value = true
    const params = {
      pageNum: currentPage.value,
      pageSize: pageSize.value,
      title: searchParams.value.title,
      status: searchParams.value.status
    }
    const { data } = await getAdsList(params)
    console.log("广告列表响应:", data)
    
    if (data.success) {
      adsList.value = data.data.records
      total.value = data.data.total
    } else {
      ElMessage.error(data.message || '获取广告列表失败')
    }
  } catch (error) {
    ElMessage.error('获取广告列表失败')
    console.error('加载广告列表错误:', error)
  } finally {
    loading.value = false
  }
}

// 搜索处理
const handleSearch = () => {
  currentPage.value = 1
  loadAdsList()
}

// 审核处理
const handleReview = (row, status) => {
  const isApprove = status === 1
  const statusText = isApprove ? '审核通过' : '拒绝'
  
  ElMessageBox.confirm(
    `确定要${statusText}该广告吗？`,
    '审核确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: isApprove ? 'success' : 'warning'
    }
  ).then(async () => {
    try {
      // 根据操作类型调用不同的审核接口
      if (isApprove) {
        await approveAds(row.id)
      } else {
        await rejectAds(row.id)
      }
      
      ElMessage.success(`${statusText}成功`)
      loadAdsList() // 刷新列表
    } catch (error) {
      ElMessage.error(`${statusText}失败`)
      console.error('审核操作错误:', error)
    }
  }).catch(() => {
    ElMessage.info('已取消操作')
  })
}

// 时间格式化
const formatTime = (time) => {
  if (!time) return '--'
  return new Date(time).toLocaleString()
}

// 分页处理
const handlePageChange = (newPage) => {
  currentPage.value = newPage
  loadAdsList()
}

// 初始化
onMounted(() => {
  loadAdsList()
})
</script>

<style scoped>
.ads-review-container {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}

.search-bar {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>